// 引入变量
@use "var.scss" as *;

.home {
    width: 80%;
    margin-top: $header-height - 0.625rem; // 使用相对单位rem

    .main-content {
        display: flex;

        // 主区域容器防止flex干扰
        .section-container {
            width: 100%;

            .wrapper-center {
                width: 85%;
                margin-left: 12%;
                box-shadow: 0 1.25rem 1rem 0.3125rem #b9b1b1;
                width: calc(100% - 15.75rem);
                min-height: 37.5rem;

                // 主区域
                .section {
                    width: 100%;
                    margin-top: 1.25rem; // 使用相对单位rem
                    padding: 0 1.875rem; // 使用相对单位rem
                    // background-color: $color-white;
                    box-sizing: border-box;
                    word-wrap: break-word;
                    margin-bottom: 1rem;

                    /* 或者使用 overflow-wrap: break-word; */
                    .section-title {
                        height: 3.75rem; // 使用相对单位rem
                        line-height: 3.75rem; // 使用相对单位rem
                        padding: 1rem 0; // 使用相对单位rem
                        margin-bottom: 1.75rem;
                        font-size: 1.75rem; // 使用相对单位rem
                        font-weight: 500;
                        text-align: center;
                        color: #d1dada;
                        box-sizing: border-box;
                    }

                    .section-title::before,
                    .section-title::after {
                        content: "";
                        /* 生成一个内容为空的伪元素 */
                        display: inline-block;
                        /* 将伪元素设为内联块元素 */
                        width: 40%;
                        /* 竖杠的宽度 */
                        height: 0.1rem;
                        /* 竖杠的高度，与标题行高相同 */
                        background-color: #dbdcdc;
                        /* 设置绿色 */
                        vertical-align: middle;
                        /* 将竖杠垂直居中 */
                    }

                    // 在移动端应用不同的样式
                    @media screen and (max-width: 768px) {
                        // width: 98%;
                        // margin: 0 1%;
                        margin-top: 0.625rem; // 调整移动端的顶部边距
                        padding: 0 0.625rem; // 调整移动端的内边距

                        .section-title {
                            margin-bottom: 0rem;
                            height: 2.5rem; // 调整移动端的标题高度
                            line-height: 2.5rem; // 调整移动端的标题行高
                            padding-top: 0.3125rem; // 调整移动端的标题顶部内边距
                            font-size: 1.25rem; // 调整移动端的标题字体大小
                        }

                        .section-title::before,
                        .section-title::after {
                            content: "";
                            /* 生成一个内容为空的伪元素 */
                            display: inline-block;
                            /* 将伪元素设为内联块元素 */
                            width: 20%;
                            /* 竖杠的宽度 */
                            height: 0.1rem;
                            /* 竖杠的高度，与标题行高相同 */
                            background-color: #dbdcdc;
                            /* 设置绿色 */
                            vertical-align: middle;
                            /* 将竖杠垂直居中 */
                        }
                    }
                }

                @media screen and (max-width: 768px) {
                    width: 98%;
                    margin: 0 1%;
                }
            }
        }

        // 在移动端应用不同的样式
        @media screen and (max-width: 768px) {
            .section-container {
                width: 100%;
            }
        }

        // 侧边栏
        .sidebar {
            position: relative;
            width: 22%;
            margin-right: 3%;
            margin-top: 1rem;
            /* 侧边栏的宽度，根据实际需要调整 */
            background-color: transparent;
            /* 侧边栏的背景色 */
            box-sizing: border-box;

            /* 保持元素的盒模型大小不受边框和填充的影响 */
            //   侧边栏每个子项
            .sidebar-item-box {
                .sidebar-item {
                    margin-bottom: 25px;

                    //   广告的容器
                    .ad-container {
                        height: 150px;
                    }

                    //侧边栏内容的容器
                    .content-container {
                        padding-left: 10px;
                        padding-top: 10px;
                        background-color: $color-white;

                        //   标题
                        .title {
                            margin-bottom: 10px;
                        }

                        .title::before {
                            content: "";
                            /* 生成一个内容为空的伪元素 */
                            display: inline-block;
                            /* 将伪元素设为内联块元素 */
                            width: 5px;
                            /* 竖杠的宽度 */
                            height: 16px;
                            /* 竖杠的高度，与标题行高相同 */
                            background-color: #1abc9c;
                            /* 设置绿色 */
                            margin-right: 10px;
                            /* 调整竖杠与标题之间的间距 */
                            vertical-align: middle;
                            /* 将竖杠垂直居中 */
                        }
                    }
                }
            }
        }
    }
}

.day-mode .wrapper-center {
    .section {
        background-color: #fff;
        color: #21252b;
    }
}

.night-mode .wrapper-center {
    .section {
        background-color: #21252b;
        color: #ffffff;
    }
}

.night-mode .section-title::after {
    background-color: #21252b;
    color: #ffffff;
}

.night-mode .home {
    .main-content {
        .sidebar {
            .sidebar-item {
                .content-container {
                    background-color: #21252b;
                    color: #ffffff;
                }
            }
        }
    }
}
